<!DOCTYPE html>
<html>
<head>
    <title>报名系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="报名系统">
    <link rel="shortcut icon" type="image/x-icon" href="__PUBLIC__/imgs/favicon.ico" media="screen" />
    <link rel="stylesheet" href="__PUBLIC__/lib/weui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.css">

</head>

<body ontouchstart>


<div class="weui-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item  {$tabbnt}" href="#tab1">
            报名
        </a>
        <a class="weui-navbar__item  {$tabbnt1} " href="#tab2">
            查询
        </a>
    </div>
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item {$actbnt} ">
            <form id="goform" action="__URL__/getinfo" method="post">

                <div class="weui-cells weui-cells_form">
                    <div class="weui-cells__title">节目信息</div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label for="cat1" class="weui-label">类别一</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" id="cat1" type="text" name="cat1" readonly="readonly"  placeholder="选择类别一"  value="">
                        </div>
                    </div>

                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label for="cat2"  class="weui-label">类别二</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input"  id="cat2" type="text" name="cat2" readonly="readonly"  placeholder="选择类别二" value="">
                        </div>
                    </div>
                    <div class="weui-cells__tips" id="remark">说明：请选择类别一</div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">节目名称</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="showname" placeholder="节目名称" value="">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="contname"  placeholder="联系人姓名" value="">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="contid" totallength="18" maxlength="18"  placeholder="联系人身份证号码" value="">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="number" name="contphone"  placeholder="联系人手机号码" value="">
                        </div>
                    </div>
                    <div class="weui-cells__tips" id="">说明：请确保联系人及电话的准确</div>
                </div>


                <div id="divadd" class="weui-cells weui-cells_form">
                    <div class="weui-cells__title">参赛人员信息</div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">参赛人数</label></div>
                        <div class="weui-cell__bd">
                            <input id="pnum" class="weui-input" name="nums" type="number" value="1" readonly="readonly"  placeholder="参加人员数量">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">参赛人姓名</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="p[0][pname]"  placeholder="参加人员姓名" value="">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="p[0][pid]"  placeholder="参赛人身份证号码" value="">
                        </div>
                    </div>
                </div>

                <div class="weui-cells__tips" id="premark">说明：点击下方按钮进行添加，必须填写每位参赛人员信息</div>
                <a href="javascript:void(0);" class="weui-cell weui-cell_link">
                    <div class="weui-cell__bd" id="addp">点击添加参赛人员</div>
                    <div class="weui-cell__bd" id="delp">点击删除参赛人员</div>
                </a>



                <div class="weui-btn-area">
                    <a class="weui-btn weui-btn_primary"  href="javascript:" id="showTooltips">确定</a>
                </div>

            </form>
        </div>
        <div id="tab2" class="weui-tab__bd-item {$actbnt1} ">
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form" method="post" action="__URL__/queryshow">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" name="contid" class="weui-search-bar__input" id="searchInput" placeholder="输入报名身份证号码查询" required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                        <i class="weui-icon-search"></i>
                        <span>查询报名信息</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
                <volist name="result" id="vo">


                    <div class="weui-form-preview">
                        <div class="weui-form-preview__hd">
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">节目名称</label>
                                <em class="weui-form-preview__value">{$vo.showname}</em>
                            </div>
                        </div>
                        <div class="weui-form-preview__bd">
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">节目类别一</label>
                                <span class="weui-form-preview__value">{$vo.cat1}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">节目类别二</label>
                                <span class="weui-form-preview__value">{$vo.cat2}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">联系人姓名</label>
                                <span class="weui-form-preview__value">{$vo.contname}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">联系人身份证</label>
                                <span class="weui-form-preview__value">{$vo.contid}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">联系人手机</label>
                                <span class="weui-form-preview__value">{$vo.contphone}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">报名序号</label>
                                <span class="weui-form-preview__value">{$vo.showseq}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">报名序号</label>
                                <span class="weui-form-preview__value">{$vo.showseq}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">报名时间</label>
                                <span class="weui-form-preview__value">{$vo.indate}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">报名单价</label>
                                <span class="weui-form-preview__value">{$vo.money}元/人</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">参赛人数</label>
                                <span class="weui-form-preview__value">{$vo.nums}人</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">合计金额</label>
                                <span class="weui-form-preview__value">{$vo.totalmoney}元</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">优惠金额</label>
                                <span class="weui-form-preview__value">-{$vo.salemoney}元</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">支付金额</label>
                                <span class="weui-form-preview__value">{$vo.paymoney}元</span>
                            </div>
                        </div>
                        <div class="weui-form-preview__ft">
                            <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">参赛人信息如下</a>
                        </div>

                    </div>
                </volist>
            <volist name="presult" id="vo">
                <div class="weui-form-preview__bd">

                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">参赛人姓名</label>
                        <span class="weui-form-preview__value">{$vo.pname}</span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">参赛人身份证</label>
                        <span class="weui-form-preview__value">{$vo.pid}</span>
                    </div>

                </div>
            </volist>

        </div>
    </div>
</div>



<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="__PUBLIC__/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script src="__PUBLIC__/js/jquery-weui.js"></script>
<script src="__PUBLIC__/js/comm.js"></script>

<script>
    $("#cat1").select({
        title: "选择类别",
        items: [
            {
                title: "“小朗诵家”语言类",
                value: "1",
            },
            {
                title: "“最美童声”争霸赛声乐类",
                value: "2",
            },
            {
                title: "“小舞蹈家”舞蹈类",
                value: "3",
            }
        ],
        onChange: function(d) {


        },
        onClose: function(d) {
            $("#remark").html("说明：选择了"+d.data.titles);

            $.ajax({
                type: "POST",
                url: "__URL__/getcates",
                data: "",
                success: function (data) {
                    $("#remark").html('说明：获取数据中...');
                    select2(data);
                },
                error: function (data) {
                    console.log(data.responseText);
                }
            })

        },
        onOpen: function() {
            console.log("open");
        },
    });

    function select2(iterms){
        $("#remark").html('说明：请选择类别二');
        $("#cat2").select({
            title: "选择类别",
            items: iterms,
            onChange: function(d) {

                console.log('change');
            },
            onClose: function(d) {
                console.log(d.data.values);
                $("#remark").html(d.data.values);
                $.each(
                    iterms,
                    function (i, n) {
                        if(n.value === d.data.values){
                            $("#remark").html('说明：'+n.remark);
                        }
                    }
                )
            },
            onOpen: function() {

                console.log("open");
            },
        });

    }
    
    
    $("#addp").click(
        function (event) {
            var divnum = $("#divadd > div").length;
            var indexnum = divnum/2 - 1;
            $("#divadd").append('<div class="weui-cell">\n' +
                '            <div class="weui-cell__hd"><label class="weui-label">参加人姓名</label></div>\n' +
                '            <div class="weui-cell__bd">\n' +
                '                <input class="weui-input" type="text"  placeholder="参加人员姓名">\n' +
                '            </div>\n' +
                '        </div>');
            $(".weui-input:last").attr('name', "p["+indexnum+"][pname]");
            $("#divadd").append('<div class="weui-cell">\n' +
                '            <div class="weui-cell__hd"><label class="weui-label">身份证号码</label></div>\n' +
                '            <div class="weui-cell__bd">\n' +
                '                <input class="weui-input" type="number" placeholder="参赛人身份证号码">\n' +
                '            </div>\n' +
                '        </div>')
            $(".weui-input:last:last").attr('name', "p["+indexnum+"][pid]");
            $("#pnum").val(parseInt($("#pnum").val())+1);
            console.log("aaaa")
        }
    )
    
    $("#delp").click(function () {
        var divnum = $("#divadd > div").length;
        if (divnum > 4){

            $("#divadd > div:last").remove();
            $("#divadd > div:last").remove();
            $("#pnum").val(parseInt($("#pnum").val())-1);
        }

    })

    $("#showTooltips").click(function () {

        $.each($("#goform  input"),function (i, n) {
            //console.log($(n).val());
            //验证是否必须为空
            if($(n).val() === ""){
                $.alert($.trim($(n).parent().prev().children().html())+": 不能为空", "提示", function() {
                    $(n).focus();
                });
                return false;
            }
            //console.log($(n).attr("maxlength"));
            //位数
            if(typeof($(n).attr("totallength")) != "undefined" ){
                var num = parseInt($(this).attr("maxlength"));
                var num2 = parseInt($(this).val().length);
                console.log(num);
                console.log(num2);
                if(num != num2){
                    console.log("aa");
                    $.alert($.trim($(n).parent().prev().children().html())+": 长度位数必须"+num, "提示", function() {
                        $(n).focus();
                    });
                    return false;
                }

            }

        })
       // $("#goform").submit();
    })

</script>

</body>
</html>
